<template>
    <div class="home">
        <div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div>
                        <el-statistic :value="allUser" title="用户统计"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-statistic v-loading="isLoadPro" title="商品统计">
                            <template slot="formatter"> {{ allPro == 0 ? "—" : allPro }} </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>

                    </div>
                </el-col>
                <el-col :span="6">
                    <div>

                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top:20px;">
                <el-col :span="16">
                    <div class="echar-container" ref="echartsDemo">

                    </div>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getStatisticUserAPI, getStatisticProAPI } from "@/api/data"
import * as echarts from 'echarts';


export default {
    name: "HomeDefault",
    data() {
        return {
            allUser: 0,
            allPro: 0,
            isLoadPro: true,
            timer: null,
        }
    },
    methods: {
        async getStatisticUser() {
            try {
                let res = await getStatisticUserAPI()
                console.log(res);
                this.allUser = res.data;
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        async getStatisticPro() {
            try {
                let res = await getStatisticProAPI()
                console.log(res);
                this.allPro = res.data;
                this.isLoadPro = false;
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        ajaxLoop() {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.getStatisticUser();
                this.getStatisticPro();
            }, 10000);
        },
        initEcharts() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.echartsDemo);

            let option = {
                // echarts标题
                // title: {
                //     text: 'ECharts 入门示例'
                // },
                // 图例组件展现了不同系列的标记(symbol)
                legend: {
                    data: ['销量',"价格","库存","满意度"],
                    right:"0",
                    top:"center",
                    orient:"vertical",
                },
                // 提示工具
                tooltip: {
                    trigger:"axis",
                    show:true,
                },
                // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                toolbox:{
                    show: true,
                    feature: {
                    dataZoom: {
                        yAxisIndex: "none"
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ["line", "bar"]
                    },
                    restore: {},
                    saveAsImage: {}
                    },
                },
                // x轴
                xAxis: {
                    type:"category", // 类目轴 (类别)
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                // y轴
                yAxis: {
                    type:"value",  // 数值轴，适用于连续数据。
                },
                grid:{
                    // width:"100%",
                    right:100,
                    // left:50,
                    // top:50,

                },
                // 
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    },
                    {
                        name: '价格',
                        type: 'bar',
                        data: [16.5, 98, 200, 105, 240, 10]
                    },
                    {
                        name: '库存',
                        type: 'bar',
                        data: [50, 204, 36, 190, 45, 300]
                    },
                    {
                        name: '满意度',
                        type: 'bar',
                        data: [50, 204, 36, 190, 45, 300]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            // 实例的方法
            // myChart.resize({
            //     width:"auto",  // 则表示自动取 dom（实例容器）的宽度。
            //     height:"auto",  // 则表示自动取 dom（实例容器）的高度。
            // });


        }
    },
    mounted() {
        this.getStatisticUser();
        this.getStatisticPro();
        this.ajaxLoop();


        this.initEcharts();
    },
    destroyed() {
        clearInterval(this.timer);
    }
}
</script>

<style lang="scss" scoped>
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}

.echar-container {
    width: 100%;
    height: 400px;
}
</style>